import { Select } from 'antd';
import { useEffect, useState } from 'react';
import Typography from '../Typography';
import Style from './index.module.less';

function CommonSelect(props) {
  const { placeholder, showCount, wrapperStyle, ...arg } = props;
  const [isShowPlaceholder, setIsShowPlaceholder] = useState(!arg.value);

  useEffect(() => {
    setIsShowPlaceholder(!arg.value);
  }, [arg.value]);

  return (
    <div className={Style['c-select-wrapper']} style={wrapperStyle}>
      <Select {...arg}></Select>

      {placeholder && isShowPlaceholder && (
        <div className={Style['ant-select-placeholder']}>
          {!!arg['aria-required'] && <Typography type="error">*</Typography>}&nbsp;{placeholder}
        </div>
      )}
    </div>
  );
}
export default CommonSelect;
